<template>
  <!-- 弹出层 -->
  <van-popup
    :overlay-style="{
      zIndex: '10001',
    }"
    :show="searchShow"
    position="bottom"
    :style="{ height: '100%', zIndex: '10002' }"
  >
    <van-nav-bar
      title="选择标签"
      :placeholder="true"
      :safe-area-inset-top="true"
    />
    <van-search v-model="keWords" placeholder="请输入搜索关键词" />
    <div class="searchMain">
      <div class="choose">
        <div class="tagTitle">选中标签(最多5个)</div>
        <!-- 选中标签 -->
        <van-tag
          v-for="tag in 5"
          :key="tag.id"
          type="primary"
          plain
          size="medium"
          closeable
          @close="closeTag"
        >
          vue
        </van-tag>
      </div>
      <div class="create">
        <div class="tagTitle">创建一个</div>
        <van-tag type="primary" plain size="medium">
          vueJs
        </van-tag>
      </div>
      <div class="tagList">
        <div class="tagTitle">选择标签</div>
        <van-tag
          v-for="tag in 5"
          :key="tag.id"
          type="primary"
          plain
          size="medium"
        >
          vue
        </van-tag>
        <van-empty description="暂无标签" />
      </div>
    </div>
    <footer>
      <van-button
        class="mt-10 mb-20"
        type="danger"
        block
        size="small"
        @click="$emit('update:searchShow', false)"
      >
        取消
      </van-button>
      <van-button
        class="mt-10 mb-20"
        type="primary"
        block
        size="small"
        @click="savaBtn"
      >
        确定
      </van-button>
    </footer>
  </van-popup>
</template>

<script lang="ts">
// 引入vue方法
import { reactive, toRefs, defineComponent } from "vue";
export default defineComponent({
  name: "searchPopup",
  components: {},
  props: {
    searchShow: {
      type: Boolean,
      require: true,
    },
  },
  setup() {
    const data = reactive({
      keWords: "", // 弹出层 tag 搜索框
    });
    // 提交文章信息
    const savaBtn = () => {
      console.log("提交", data);
    };

    // 关闭标签
    const closeTag = (data) => {
      console.log(data);
    };
    return {
      ...toRefs(data),
      savaBtn,
      closeTag,
    };
  },
});
</script>
<style scoped lang="less">
.van-tag {
  margin-top: 5px;
  font-weight: normal;
  margin-left: 5px;
}
.searchMain {
  margin-bottom: 62px;
  overflow-y: auto;
  padding: 0 10px;
  .tagTitle {
    font-size: 14px;
    color: #969790;
  }
  .choose,
  .tagList,
  .create {
    margin-bottom: 20px;
  }
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  padding: 0 10px;
  box-sizing: border-box;
  .van-button + .van-button {
    margin-left: 10px;
  }
}
</style>
